<template>
  <div class="home">
    <div class="background">
      <div class="login" v-if="isLogin">
        <div class="login-left">
          <p class="please">welcome</p>
          <p class="please">世间话(せけんばなしする)</p>
        </div>
        <div class="login-right">
          <div class="user">
            <span class="icon iconfont iconxingming"></span>
            <label for="username">用户名</label>
            <input type="text" class="username" id="username" ref="username" />
          </div>
          <div class="avator">
            <span class="icon iconfont iconbianzubeifen3"></span>
            <label for="avator">选择头像</label>
            <span class="icon iconfont iconzidingyitouxiang-bianji"
              >自定义头像</span
            >
            <ul class="avator-list">
              <li v-for="(item, index) in imgUrl" :key="item">
                <img
                  :src="require('../assets/images/avator-' + item + '.jpg')"
                  alt
                  @click="selectAvator(index + 1, item)"
                  :class="{ active: currentIndex === index + 1 ? true : false }"
                />
              </li>
            </ul>
          </div>
          <div class="botton" @click="login">登陆</div>
        </div>
        <el-alert
          :title="title"
          center
          show-icon
          type="warning"
          @close="close"
          v-show="alert"
        >
        </el-alert>
      </div>
      <chat class="chat" v-else :user="user" :userList="userList" @sendMessage="sendMessage" :message="message" @handleFile="handleFile" ref="chat"/>
    </div>

    <!-- <div class="welcome">
           <span class="icon iconfont iconLANDINGPAGE"></span>
        <p>欢迎来到秘密基地</p>

         <login/> -->
    <!-- <div>
            //一个盒子，加入聊天室，如果没有登陆过，就出现登陆界面，如果登陆过就直接进入聊天界面
            //登陆界面
            //聊天界面
            //主页面---默认没有登陆过，就直接显示登陆界面，登陆界面是选择头像和设置名字，名字的话要检查有没有一样的名字
        </div>
       </div> -->
  </div>
</template>

<script>
import data from "../data";
import axios from "axios";
import io from "socket.io-client";
import chat from './chat'
//1、连接服务器
// let socket = io(data.baseUrl);
export default {
  components: {
      chat,

  },
  data() {
    return {
      isLogin: true,
      imgUrl: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
      currentIndex: 1,
      //当前用户名和头像
      user: {},
      userList: [],
      alert: false,
      //提示文案
      title: "请输入用户名",
      socket: null,
      message: {},
    };
  },
  created() {
    //1、连接服务器
    this.socket = io(data.baseUrl)
  
  },
  mounted() {
    // console.log(this.$store)
    //4、登陆失败
    this.socket.on("error", res => {
      this.alert = true;
      this.title = res.msg;
    });
    //4、登陆成功
    this.socket.on("success", res => {
      this.alert = true;
      this.title = "登陆成功";
      //登陆成功之后
      if (this.title === "登陆成功") {
        //隐藏登陆//显示聊天窗口
        // this.$emit("loginIsShow", false);
        this.isLogin = false
      }
      //告诉所有人有人进来了
      //登陆成功就push进加入的人里面
      this.socket.on("userAdd", data => {
        this.$store.commit("setJoinRoom",  {...data, type: 'login'});
      });
      //用户离开的消息
      this.socket.on("userLeave", data => {
        this.$store.commit('setLeaveRoom', data)
        this.$refs.chat ? this.$refs.chat.haveOneleaveRoom() : null
      });
      //接收用户列表
      this.socket.on('userList', data => {
        this.userList = data
      })
      //监听聊天的消息
      this.socket.on('message', data => {
        // console.log(data)
        this.message = data
      })
      //  console.log(this.message)
      //监听图片
      this.socket.on('image', data => {
        //显示图片
        this.$refs.chat.handleImage(data)
      })
      
    });
  },
  methods: {
    //选择头像
    selectAvator(index, item) {
      this.currentIndex = index;
    },
    //登陆
    login() {
      //2、获取用户名和头像
      this.user.username = this.$refs.username.value;
      this.user.img = "../assets/images/avator-" + this.currentIndex + ".jpg";
      this.user.imgId = this.currentIndex;
      if (!this.user.username) {
        this.alert = true;
        return;
      }
    //   console.log(this.user);
      //3、登陆
      this.socket.emit("login", this.user);
    },
    close() {
      this.alert = false;
    },
    //发送消息
    sendMessage(text){
      // console.log(text)
      const { username, img , imgId} = this.user
      this.socket.emit('sendMessage', { username, img, imgId, msg: text })
    },
    //发送图片
    handleFile(file) {
      this.socket.emit('sendImage', {...this.user,file})


    }
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 100%;
  .background {
    width: 100%;
    height: 100%; /**宽高100%是为了图片铺满屏幕 */
    // position: absolute;
    transition: all 0.3s;
    background-image: url(../assets/images/enter.jpg);
    background-repeat: no-repeat;
    background-size: 120% 120%;
  }
  .login {
    position: absolute;
    top: 90px;
    left: 250px;
  }
  .chat {
    position: absolute;
    // top: 90px;
    left: 50px;
  }
  .login {
    position: relative;
    height: 400px;
    width: 700px;
    // background-color: chocolate;
    .login-left {
      // display: flex;
      // justify-content: center;

      // align-items: center;
      // flex-wrap: wrap;
      position: absolute;
      left: 0;
      top: 0px;
      width: 200px;
      height: 100%;
      background-color: rgba(1, 19, 14, 0.473);
      font-size: 30px;
      color: rgb(20, 236, 128);
      opacity: 0.7;
      .please:first-child {
        position: absolute;
        top: 100px;
        left: 30px;
      }
      .please:nth-child(2) {
        position: absolute;
        top: 150px;
        left: 10px;
      }
    }
    .login-right {
      position: absolute;
      height: 100%;
      top: 0;
      left: 200px;
      right: 0;
      // width: 100%;
      background-color: white;
      opacity: 0.8;
      .user {
        color: rgba(10, 175, 59, 0.473);
        position: absolute;
        left: 30px;
        // width: 100%;
        top: 50px;
        .username {
          position: absolute;
          top: 20px;
          left: 3px;
          width: 300px;
          height: 30px;
          // color: rgb(207, 175, 175);

          outline: 0;
          font-size: 20px;
          padding: 12px 20px;
          margin: 8px 0;
          color: rgb(116, 108, 108);
          // display: inline-block;
          border: 1px solid rgb(187, 176, 176);
          border-radius: 2px;
          box-sizing: border-box;
        }
      }
      .avator {
        color: rgba(10, 175, 59, 0.473);
        position: absolute;
        top: 150px;
        left: 30px;
        // background-color: royalblue;

        .avator-list {
          margin-top: 8px;
          padding: 10px 25px;
          width: 270px;
          height: 100px;
          // background-color: saddlebrown;
          border: 1px solid rgb(187, 176, 176);
          overflow: scroll;
          li {
            float: left;
            width: 50px;
            height: 50px;
            background-color: saddlebrown;
            margin: 2px 2px;
            cursor: pointer;
            img {
              height: 100%;
              width: 100%;
            }
            .active {
              border: 2px solid greenyellow;
            }
          }
        }
      }
      .botton {
        height: 30px;
        width: 100px;
        position: absolute;
        left: 160px;
        bottom: 40px;
        text-align: center;
        line-height: 30px;
        background-color: rgb(9, 153, 57);
        color: rgb(231, 238, 234);
        font-weight: bold;
        border-radius: 20px;
        cursor: pointer;
      }
    }
  }
  .enter {
    position: absolute;
    top: 30px;
    left: 400px;
    // height: 30px;
    // width: 100px;
    font-size: 20px;
    color: seashell;
    border: 1px solid rgb(14, 172, 48);
    background-color: yellowgreen;
    border-radius: 10px;
    cursor: pointer;
    p {
      height: 100%;
      width: 100%;
      // line-height: 30px;
    }
  }
  .welcome {
    position: absolute;
    top: 0;
    left: 300px;
    height: 100px;
    width: 600px;
    background-color: red;
    opacity: 0.5;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    color: yellow;
  }
}
</style>
